<template>
  <div class="iosandroid">
    <div class="iosandroid-banner">

    </div>
    <div class="iosandroid-download" @click="downloadApp" v-show="isNative === ''">
      <img :src="require('./download.png')" alt="立即下载">
    </div>
    <div class="iosandroid-content" :style="{'height': h + 'px'}">
      <div class="text1" :style="{'top': text1 + 'px'}">
        <h3>1288元新手大礼包</h3>
        <p>通过分秒金融APP注册投资，即享1288元新手大礼包。</p>
      </div>
      <div class="text2" :style="{'top': text2 + 'px'}">
        <h3>首次通过APP投资最高可获15元现金奖励（可提现）</h3>
        <p>无论新老用户，通过App Store 或安卓各大应用商店搜索”分秒金融”进行下载并注册可参与本活动，本活动仅限首次使用APP投资。
奖励条件①.首次通过APP投资分秒金融任意标的，投资金额≥500元，账户即送5元现金，现金可进行提现或投资。
奖励条件②.首次通过APP投资分秒金融90天及以上标的，投资金额≥1000元，账户即送15元现金，现金可进行提现或投资。
</p>
      </div>
      <div class="text3" :style="{'top': text3 + 'px'}">
        <h3>好友投资5000元以上，享80元现金+8%好友投资收益</h3>
        <p>凡通过个人邀请码邀请好友并完成5000元以上投资，享邀请好友福利80元现金+8%好友收益返现，现金可进行提现或投资，具体活动规则可查看网站邀请好友页面。</p>
      </div>
      <div class="text4" :style="{'top': text4 + 'px'}">
        <p>王先生首次单笔投资10万元，投资3个月，可使用688元超级红包抵扣券，加上年化10%，将获利3188元。王先生下载APP并进行投资，直接获得了15元现金奖励。他觉得我们的理财产品靠谱，于是邀请他的朋友李先生也进行出借。此时李先生也出借50000元3个月，王先生可获得80元现金，以及李先生收益的8%返现（不影响李先生收益），共计100元收益返现，此次活动中，王先生共获利3383元。</p>
      </div>
    </div>
    <div class="iosandroid-padding"></div>
    <div class="iosandroid-layer"  v-show="isNative === ''">
      <img :src="require('./layer.png')" alt="App下载" @click="downloadApp">
    </div>
  </div>
</template>

<script>
  import activityRegister from '@/components/activity-register'

  export default {
    data () {
      return {
        w: 0,
        h: 0,
        promoteCode: '',
        isNative: ''
      }
    },
    computed: {
      text1 () {
        return (485 / 2642) * this.h
      },
      text2 () {
        return (980 / 2642) * this.h
      },
      text3 () {
        return (1690 / 2642) * this.h
      },
      text4 () {
        return (2240 / 2642) * this.h
      }
    },
    methods: {
      downloadApp () {
        const ua = navigator.userAgent
        const isiOS = ua.match(/iPhone|iPod|iPad/i)
        const isAndroid = ua.match(/Android/i)
        const lua = navigator.userAgent.toLowerCase()
        // eslint-disable-next-line
        const isWeChat = lua.match(/MicroMessenger/i) == 'micromessenger'
        // const isPC = !isiOS && !isAndroid
        // 是否为安卓qq内置浏览器
        const isAndroidQQ = ua.indexOf('MQQBrowser') > -1
        const apkName = this.promoteCode === '' ? 'fenmiaojinrong' : `fmjrapp_${this.promoteCode}`
        if (isWeChat || isAndroidQQ) {
          this.$router.push(`/app?c=${this.promoteCode}`)
        } else if (isiOS) {
          setTimeout(function () {
            window.location = 'https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1231293266&mt=8'
          }, 100)
        } else if (isAndroid) {
          setTimeout(() => {
            window.location = `https://www.fenmiaojinrong.com/upload/upload/${apkName}.apk?time=${Date.now()}`
          }, 100)
        }
      }
    },
    created () {
      this.w = document.documentElement.clientWidth
      this.h = this.w * (2642 / 750)
      if (this.$route.query['c'] && this.$route.query['c'] !== '') {
        this.promoteCode = this.$route.query['c']
      }
      if (this.$route.query['type'] && this.$route.query['type'] !== '') {
        this.isNative = this.$route.query['type']
      }
    },
    components: {
      activityRegister
    }
  }
</script>

<style lang='scss'>
  .iosandroid {
    width: 100%;
    &-banner {
      height: 370px;
      background: url('./banner.png') 0 0 no-repeat;
      background-size: cover;
    }
    &-download {
      text-align: center;
      height: 64px;
      font-size: 0;
      margin-top: 40px;
      img {
        width: 306px;
        height: 62px;
      }
    }
    &-content {
      width: 100%;
      background: url('./bg.png') 0 0 no-repeat;
      background-size: cover;
      color: #ac1e1e;
      position: relative;
      .text1 {
        width: 430px;
        left: 158px;
        position: absolute;
      }
      .text2,
      .text3,
      .text4 {
        position: absolute;
        width: 460px;
      }
      .text2 {
        width: 550px;
        left: 104px;
      }
      .text3 {
        left: 137px;
      }
      .text4 {
        position: absolute;
        width: 515px;
        text-indent:40px;
        left: 121px;
      }
      h3 {
        font-size: 27px;
        font-weight: 900;
        margin-bottom: 20px;
        line-height: 40px;
      }
      p {
        font-size: 25px;
        line-height: 36px;
      }
    }
    &-padding {
      height: 108px;
    }
    &-layer {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 108px;
      img {
        width: 750px;
        height: 108px;
      }
    }
  }
</style>
